<template>
  <el-menu
    :router="false"
    class="star-menu"
    :unique-opened="true"
    :collapse="userStore.isSidebarCompact"
  >
    <span class="logo-wrapper">
      <el-image v-show="userStore.isSidebarCompact" class="logo-wrapper-logo" :src="logo" />
      <el-image v-show="!userStore.isSidebarCompact" class="logo-wrapper-full-logo" :src="logoFull" />
    </span>

    <menu-item v-for="menu in menuStore.menuList" :menuData="menu" :key="menu.id"></menu-item>
  </el-menu>
</template>

<script setup>
import useStore from '@/store'
import { onMounted, getCurrentInstance } from 'vue'
import logo from '@/assets/star.png'
import logoFull from '@/assets/star-full.png'
import menuItem from '@/components/common/menu/MenuItem'

const { userStore, menuStore } = useStore()

onMounted(() => {
  if (menuStore.menuList === undefined || menuStore.menuList.length === 0) {
    menuStore.getMenuList()
  }
})

</script>

<style lang="less" scoped>
.star-menu{
  height: 100%;
}
.star-menu:not(.el-menu--collapse) {
  width: 100%;
}

.logo-wrapper{

  width: 100%;

  .logo-wrapper-logo{
    margin: 5px 0;
    padding: 0 10px;
  }

  .logo-wrapper-full-logo{
    margin: 5px 0;
    // height: 50px;
    // width: calc(100% - 60px);
    padding: 0 30px;
  }
}
</style>
